<template>
    <section class="message_release">
        <div class="message_release_left">
            <SecretaryTaskRelease  :releaseType="'基本信息更新'" style="text-align: left!important;" @releaseSuccess="getAllList"> </SecretaryTaskRelease>
        </div>
        <div class="message_release_right">
            <div class="topCard">
                <el-card style="height:100%;text-align: left" class="titleCard">
                    <p style="color: white;font-size: 20px;margin-top:-5px">已发布任务列表</p>
                    <span style="color: hsla(0,0%,100%,.62);position: absolute;font-size: 14px;margin-top: 7px">任务信息</span>
                </el-card>
            </div>
            <el-card class="content" v-loading="listLoad">
                <div class="list_height" v-if="taskList.length">
                    <div class="list_style" v-for="(item,index) in taskList" :key="item.id" :class="index===currentCount?'list_style_active':'list_style'" @click="changeCurrent(index)">
                        <el-image :src="positionIcon" class="label_position"></el-image>
                        <el-image :src="positionIcon" class="label_position1" v-if="parseInt(item.currentPercent)==0&&(new Date()-new Date(item.endTime))<=0"></el-image>
                        <el-image :src="positionIcon1" class="label_position1" v-if="item.currentPercent==1&&(new Date()-new Date(item.endTime))<=0"></el-image>
                        <el-image :src="positionIcon2" class="label_position1" v-if="(new Date()-new Date(item.endTime))>0"></el-image>
                        <div class="task_message">
                            <div style="flex: 1"></div>
                            <div class="task_message_detail">
                                <span class="project">任务名称:</span>
                                <span class="projectValue">{{item.name}}</span>
                            </div>
                            <div class="task_message_detail">
                                <span class="project">截止日期:</span>
                                <span class="projectValue">{{item.endTime}}</span>
                            </div>
                            <div class="task_message_detail">
                                <span class="project">任务类型:</span>
                                <span class="projectValue">{{item.type}}</span>
                            </div>
                        </div>
                    </div>
                    <el-pagination
                        background
                        :page-sizes="[5, 10, 20, 50]"
                        :page-size="5"
                        @current-change="getAllList"
                        layout="total, prev, pager, next"
                        :total="total">
                    </el-pagination>
                </div>
                <div style="margin-top: 40px" v-else>
                    <el-image src="static/img/csj/noList.png"></el-image>
                </div>
            </el-card>
        </div>
    </section>
</template>

<script>
    import SecretaryTaskRelease from "./SecretaryTaskRelease";
    export default {
        name: "MessageRelease",
        data(){
            return{
                listLoad:false,
                taskList:{},
                pageParams: {
                    page: 0,
                    size: 5
                },
                total:0,
                positionIcon:'../../static/img/csj/process1.png',
                positionIcon1:'../../static/img/csj/unFinished.png',
                positionIcon2:'../../static/img/csj/hasEnd.png',
                isEnd:false,
                currentCount:0
            }
        },
        methods:{
            getAllList(data){
                this.listLoad = true;
                if (data == undefined) {
                    this.pageParams.page = 0;
                } else {
                    this.pageParams.page = data -1;
                }
                setTimeout(()=>{
                    this.$http('post',`/identity/cadreTask/page?page=${this.pageParams.page}&size=${this.pageParams.size}`,{type:'基本信息更新'},false).then(
                        data => {
                            this.listLoad = false;
                            this.taskList = data.content;
                            this.total = data.totalElements;
                        }
                    )
                },1000);
            },
            changeCurrent(index){
                 this.currentCount = index;
            }
        },
        components:{
            SecretaryTaskRelease,
        },
        mounted() {
            this.getAllList();
        }
    }
</script>

<style scoped>
    .message_release{
        display: flex;
    }
    .message_release_left{
        flex: 1;
        margin: 20px 20px 0 0;
    }
    .message_release_right{
        flex: 1;
    }
    .message_release_right .topCard {
        width: 90%;
        margin: 20px auto;
        height: 80px;
        position: relative;
        z-index: 1000;
    }
    .message_release_right .titleCard {
        background: linear-gradient(60deg, #66aabb, #43a047);
        box-shadow: 0 12px 20px -10px rgba(76, 175, 80, .28), 0 4px 20px 0 rgba(0, 0, 0, .12), 0 7px 8px -5px rgba(76, 175, 80, .2);
    }
    .message_release_right .content {
        margin: -60px 15px 15px 15px;
        border: 1px solid #EBEEF5;
        background-color: #FFF;
        color: #303133;
        -webkit-transition: .3s;
        transition: all .3s;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        padding: 15px;
        height: 650px;
        z-index: 999;
        padding-top: 50px;
    }
    .list_style{
        width:760px;
        height:50px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(223, 223, 223, 1);
        border-radius:4px;
        position: relative;
        margin: 15px auto;
        transition: all .3s;
    }
    .list_height{
        min-height: 500px;
    }
    .project{
        color: #A9A9A9;
        font-size: 14px;
        font-family:Microsoft YaHei UI;
        font-weight:500;
        line-height:50px;
    }
    .projectValue{
        font-size:14px;
        font-family:Microsoft YaHei UI;
        font-weight:400;
        color:#393939;
        line-height:50px;
    }
    .label_position{
        position: absolute;
        right: 0;
        top: -1px;
    }
    .label_position1{
        position: absolute;
        right: 0;
        top: -1px;
        width: 41.5px;
        height: 41.5px;
    }
    .list_style:hover{
        transform: translateY(-5px);
        cursor: pointer;
        -webkit-box-shadow: 0 0 1pc 1px rgba(0,0,0,.2);
        box-shadow: 0 0 1pc 1px rgba(0,0,0,.2);
        z-index: 1000;
    }
    .list_style_active{
        cursor: pointer;
        -webkit-box-shadow: 0 0 1pc 1px rgba(0,0,0,.2);
        box-shadow: 0 0 1pc 1px rgba(0,0,0,.2);
        z-index: 1000;
        background-color:#E8F6EA;
        border:1px solid rgba(69, 159, 81, 1);
    }
    .task_message{
        display: flex;
        height:15px;
    }
    .task_message_detail{
        flex: 10;
        text-align: left;
    }
</style>
<style>
    .message_release .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #0A9B1A;
        color: #FFF;
    }
    .content .el-card__body {
        padding-top: 0px;
    }
    .message_release .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #55BD94;
    }
</style>
